<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #61e7d1;
        padding: 50px 50px;
      }
      .box {
        width: 300px;
        text-align: center;
        background-color: #fff;
        padding: 20px;
        box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.6);
      }
      .box input {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <form action="" class="box">
      <fieldset>
        <legend>主要信息</legend>
        用&nbsp;户名 :
        <input type="text" name="username" placeholder="请输入用户名" />
        <br />
        密 码 :
        <input type="password" name="password" placeholder="请输入密码" />
        <br />
      </fieldset>

      性 别 : <input type="radio" name="sex" value="male" /> 男
      <input type="radio" name="sex" value="female" checked /> 女<br />
      爱 好 : <input type="checkbox" name="hobby" value="smoke" />抽烟
      <input type="checkbox" name="hobby" value=" hejiu" checked />喝酒
      <input type="checkbox" name="hobby" value="lanqing" />打篮球 <br />
      <textarea name="auter" id="" cols="30" rows="5"></textarea> <br />
      城 市 :
      <select name="place" id="">
        <option value="shiyan">十堰市</option>
        <option value="wuhan" selected>武汉</option>
        <option value="xiangfan">襄樊</option>
      </select>
      <br />
      <input type="submit" value="登录" width="100%" />
      <input type="reset" value="重置" />
      <br />
    </form>
  </body>
</html>
